<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 其他设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="tabData" @tab-click="tabChange">
                <el-tab-pane :label="`关于我们`" name="1">
                    <mavon-editor v-model="aboutData" ref="md1" @imgAdd="$imgAdd" @change="change1" style="min-height: 400px"/>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleAboutAdd">保存</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`联系我们`" name="2">
                    <mavon-editor v-model="contactUs" ref="md2" @imgAdd="$imgAdd" @change="change2" style="min-height: 400px"/>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleContactAdd">保存</el-button>
                    </div>    
                </el-tab-pane>
                <el-tab-pane :label="`用户协议与隐私政策`" name="3">
                    <mavon-editor v-model="userProtocol" ref="md3" @imgAdd="$imgAdd" @change="change3" style="min-height: 400px"/>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleUserAdd">保存</el-button>
                    </div>    
                </el-tab-pane>
                <el-tab-pane :label="`常见问题`" name="4">
                    <mavon-editor v-model="question" ref="md4" @imgAdd="$imgAdd" @change="change4" style="min-height: 400px"/>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleQAAdd">保存</el-button>
                    </div>    
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
    export default {
        name: 'tabs',
        data() {
            return {
                tabData:"1",
                aboutData:'',
                contactUs:'',
                userProtocol:'',
                question:'',
                aboutDatahtml:'',
                contactUshtml:'',
                userProtocolhtml:'',
                questionhtml:'',
            }
        },
        components: {
            mavonEditor
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                var url = "";
                if(this.tabData == "1"){
                    url = "hgz/other/getAboutUs";
                }else if(this.tabData == "2"){
                    url = "hgz/other/getContactUs";
                }else if(this.tabData == "3"){
                    url = "hgz/other/getUserProtocol";
                }else if(this.tabData == "4"){
                    url = "hgz/other/getCommonProblem";
                }
                this.$http.postHead(url).then(res =>{
                    if(res.status){
                        if(this.tabData == "1"){
                            // .Replace("\"","")
                            this.aboutData = res.data;
                        }else if(this.tabData == "2"){
                            this.contactUs = res.data;
                        }else if(this.tabData == "3"){
                            this.userProtocol = res.data;
                        }else if(this.tabData == "4"){
                            this.question = res.data;
                        }
                    }
                })
            },
            tabChange(tab,event){
                console.log(tab);
                this.tabData = tab.name;
                this.getData();
            },
            handleAboutAdd() {
                //hgz/other/setAboutUs 
                var params = {
                    value: this.aboutDatahtml
                }
                this.$http.postJson('hgz/other/setAboutUs',params).then(res =>{
                    this.controlRes(res);

                })
            },
            handleContactAdd(){
                var params = {
                    value: this.contactUshtml
                }
                this.$http.postJson('hgz/other/setContactUs',params).then(res =>{
                    this.controlRes(res);

                })
            },
            handleUserAdd(){
                var params = {
                    value: this.userProtocolhtml
                }
                this.$http.postJson('hgz/other/setUserProtocol',params).then(res =>{
                    this.controlRes(res);

                })
            },
            handleQAAdd(){
                var params = {
                    value: this.questionhtml
                }
                this.$http.postJson('hgz/other/setCommonProblem',params).then(res =>{
                    this.controlRes(res);
                })    
            },
            controlRes(res){
                if(res.status){
                    this.$message({
                            type: 'success',
                            message: '保存成功'
                    });
                }else{
                    this.$message({
                            type: 'error',
                            message: res.message
                    });   
                }
            },
            change1(value, render){
                // render 为 markdown 解析后的结果
                this.aboutDatahtml = render;
            },
            change2(value, render){
                // render 为 markdown 解析后的结果
                this.contactUshtml = render;
            },
            change3(value, render){
                // render 为 markdown 解析后的结果
                this.userProtocolhtml = render;
            },
            change4(value, render){
                // render 为 markdown 解析后的结果
                this.questionhtml = render;
            },
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file){
                var formdata = new FormData();
                formdata.append('file', $file);
                console.log(formdata);
                this.$http.postData('hgz/resource/upload',formdata).then(res =>{
                    if(res.status){
                    //上传成功
                    this.$message.success("上传成功");
                    var path = res.data[0].resourcePath;
                    if(this.tabData == "1"){
                    this.$refs.md1.$img2Url(pos, path);
                    }else if(this.tabData == "2"){
                    this.$refs.md2.$img2Url(pos, path);

                    }else if(this.tabData == "3"){
                    this.$refs.md3.$img2Url(pos, path);

                    }else if(this.tabData == "4"){
                    this.$refs.md4.$img2Url(pos, path);

                    }
                    }else{
                    this.$message.error("上传失败");
                    }
                })
            },
            
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.handle-row{
    margin-top: 10px;
}
</style>

